<template>
  <view class="container">
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="题库详情 " :background="background">
    </u-navbar>
    <view class="container_header">
      <view v-for=" item in personPaperList">
        <view class="u-today-card">
          {{item.name}}
        </view>
        <view class="u-today-header">
          <view class="u-today-text">
            题目数：{{item.questionCount}}
          </view>
          <view class="u-today-text">
            更新时间：{{item.createTime}}
          </view>
        </view>
      </view>
      <br />
      <u-line color="#EBEAEA" />
      <view class="container_grid">
        <view class="container_grid_item" @click="myErrorItem">
          <u-image class="image-top" width="50rpx" height="50rpx" src="../../static/images/cuoti.png"></u-image>
          <view class="grid-text">我的错题</view>
        </view>
        <view class="container_grid_item" @click="collectHandle">
          <u-image class="image-top" width="50rpx" height="50rpx" src="../../static/images/shangcang.png"></u-image>
          <view class="grid-text">我的收藏</view>
        </view>
        <view class="container_grid_item" @click="myNote">
          <u-image class="image-top" width="50rpx" height="50rpx" src="../../static/images/biji.png"></u-image>
          <view class="grid-text">我的笔记</view>
        </view>
        <view class="container_grid_item">
          <u-image class="image-top" width="50rpx" height="50rpx" src="../../static/images/kaoshi.png"></u-image>
          <view class="grid-text">我的考试</view>
        </view>
        <view class="container_grid_item" @click="recitePaperItem">
          <u-image class="image-top" width="50rpx" height="50rpx" src="../../static/images/beiti.png"></u-image>
          <view class="grid-text">背题</view>
        </view>
      </view>
    </view>

    <!--  -->
    <view class="container_item">
      <view class="container_item_circle">
        <view class="square">普通答题</view>
      </view>

      <view class="container_item_btn">
        <view class="container_item_btn_item1" @click="sequentialAnswering('practice')">
          <u-image width="30rpx" height="45rpx" src="../../static/images/1.png"></u-image>
          <view class="container_item_btn_text">
            顺序答
            <view class="container_item_btn_text_title">
              按照题库顺序答题
            </view>
          </view>
        </view>
        <view class="container_item_btn_item2" @click="randomAnswering('practice')">
          <u-image width="45rpx" height="40rpx" src="../../static/images/2.png"></u-image>
          <view class="container_item_btn_text">
            随机答
            <view class="container_item_btn_text_title">
              打乱题库顺序答题
            </view>
          </view>
        </view>
        <view class="container_item_btn_item3" @click="questionTypeAnswering">
          <u-image width="35rpx" height="45rpx" src="../../static/images/3.png"></u-image>
          <view class="container_item_btn_text">
            题型答
            <view class="container_item_btn_text_title">
              根据题型分类答题
            </view>
          </view>
        </view>
        <u-action-sheet :list="listError" v-model="showError" @click="actionSheetCallback"></u-action-sheet>
      </view>
    </view>

    <view class="container_aiItem" v-if="aiQuestion">
      <view class="container_item_circle">
        <view class="square">AI答题</view>
      </view>
      <view class="container_item_btn">
        <view class="container_item_btn_item1" @click="changkaoAnswering('practice')">
          <u-image width="40rpx" height="40rpx" src="../../static/images/4_1.png"></u-image>
          <view class="container_item_btn_text">
            常考答
            <view class="container_item_btn_text_title">
              练习近期常考题目
            </view>
          </view>
        </view>
        <view class="container_item_btn_item2" @click="yicuoAnswering('practice')">
          <u-image width="45rpx" height="45rpx" src="../../static/images/5_1.png"></u-image>
          <view class="container_item_btn_text">
            易错答
            <view class="container_item_btn_text_title">
              练习容易打错题目
            </view>
          </view>
        </view>
        <view class="container_item_btn_item3" @click="lenovoAnswering">
          <u-image width="45rpx" height="45rpx" src="../../static/images/6_1.png"></u-image>
          <view class="container_item_btn_text">
            联想答
            <view class="container_item_btn_text_title">
              根据联想词练习相关题目
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-modal :mask-close-able='true' v-model="handleIsUsemultiple" :show-cancel-button='true' title="题型选择">
      <view class="slot-content">
        <view class="">

        </view>
      </view>
    </u-modal>

    <u-modal :mask-close-able="true" v-model="handlePractice" :show-cancel-button="true"
      :title=" '您上次刷题进度为' +questionCompletedCount+'/'+questionCount" confirm-text="继续刷题" cancel-text="重新开始"
      @confirm="confirmPractice('practice')" @cancel="cancelPractice('practice')">
      <view class="slot-content">
        <view class="container_popup_text">
          是否继续刷题
        </view>
      </view>
    </u-modal>

    <u-modal :mask-close-able="true" v-model="handleDelete" :show-cancel-button="true" title="将删除全部刷题记录"
      confirm-text="继续删除" cancel-text="取消" @confirm="confirmDelete('practice')" @cancel="cancelDelete">
      <view class="slot-content">
        <view class="container_popup_text">
          是否继续删除
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
  import {
    getExamAPI,
    getPersonPaperAPI,
    startRecitePaperAPI,
    getPublicByIdAPI,
    resetByIdAPI
  } from '@/api/addPaper/addpaper.js'
  export default {
    data() {
      return {
        handleDelete: false,
        curLib: 'questionItems',
        personPaperList: [],
        handlePractice: false,
        aiQuestion: false,
        showError: false,
        listError: [{
            value: 6,
            text: '单选题'
          },
          {
            value: 7,
            text: '多选题'
          }
        ],
        handleIsUsemultiple: false,
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        xxx: null,
        examList: null,
        categoryId: 1,
        questionBankType: null,
        paperType: '',
        personId: '',
        progressRecordId: null,
        questionCount: '',
        questionCompletedCount: '',
        yicui:false,
      };
    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      this.personId = option.id
      if (option.paperType === 'person') {
        this.paperType = 'person'
        this.aiQuestion = false
      } else if (option.paperType === 'public') {

        this.paperType = 'public'
        this.categoryId = option.categoryId
        this.aiQuestion = true
      }
    },
    created() {
      this.detailPaper()
    },
    methods: {
      //联想答
      lenovoAnswering() {
        uni.navigateTo({
          url: '../lenovoPaper/lenovoPaper?id=' + this.personId + '&categoryId=' + this.categoryId
        })
      },
      // 我的收藏
      collectHandle() {
        uni.navigateTo({
          url: '../collection/collection?id=' + this.personId + '&categoryId=' + this.categoryId
        })
      },
      myNote() {
        uni.navigateTo({
          url: `../myNote/myNote?id=${this.personId}`
        })
      },

      myErrorItem() {
        uni.navigateTo({
          url: '../aiSubject/commonMistakes/commonMistakes?id=' + this.personId + '&categoryId=' + this.categoryId
        })

      },
      recitePaperItem() {
        uni.navigateTo({
          url: '../../pages/recitePaper/recitePaper?id=' + this.personId + '&paperType=' + this.paperType +
            '&categoryId=' + this.categoryId
        })

      },
      // 题库详情
      async detailPaper() {
        const param = {
          id: this.personId
        }
        if (this.paperType === 'public') {
          await getPublicByIdAPI(param).then((res) => {
            this.personPaperList.push(res.data)
          })
        } else if (this.paperType === 'person') {
          await getExamAPI(param).then((res) => {
            this.personPaperList.push(res.data)
          })
        }
        this.$store.dispatch('setQuestionBank', this.personPaperList[0])
      },
      // 重新刷题
      async cancelPractice(type) {
        this.questionCompletedCount = 0
        const param = this.progressRecordId
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.practiceIndex = this.questionCompletedCount
        uni.setStorageSync('sv-exam', newSvExam)
        this.xxx.paperPartItems[0].questionItems.map((oo) => {
          oo.submitted = null;
        })
        this.handleDelete = true


        // uni.navigateTo({
        //   url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
        //   success: (res) => {
        //     res.eventChannel.emit('e-transmit-exams', {
        //       param: {
        //         from_lib: this.curLib,
        //         unit: 'unit-1'
        //       },
        //       opt: {
        //         lib_name: this.curLib,
        //         type: type,
        //         questionCompletedCount: this.questionCompletedCount,
        //         questionBankType: this.questionBankType,
        //         categoryId: this.categoryId
        //       },
        //       apifunc: {
        //         examList: this.xxx
        //       }
        //     })
        //   }
        // })
      },
      //确定重新刷题
      async confirmDelete(type) {
        const param = {
          id: this.personId,
          categoryId: this.categoryId,
          questionBankType: this.questionBankType,
          questionIds: ''
        }
        await resetByIdAPI(param).then(async () => {
          this.examList = await this.getExamList();
          uni.navigateTo({
            url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
            success: (res) => {
              res.eventChannel.emit('e-transmit-exams', {
                param: {
                  from_lib: this.curLib,
                  unit: 'unit-1'
                },
                opt: {
                  lib_name: this.curLib,
                  type: type,
                  questionCompletedCount: this.questionCompletedCount,
                  questionBankType: this.questionBankType,
                  categoryId: this.categoryId
                },
                apifunc: {
                  examList: this.xxx
                }
              })
            }
          })
        })

      },
      // 继续刷题
      confirmPractice(type) {
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.practiceIndex = this.questionCompletedCount
        uni.setStorageSync('sv-exam', newSvExam)

        uni.navigateTo({
          url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type,
                questionCompletedCount: this.questionCompletedCount,
                questionBankType: this.questionBankType,
                categoryId: this.categoryId,
                changkaoda:  this.yicui ?'changkaoda':''
              },
              apifunc: {
                examList: this.xxx
              }
            })
          }
        })
      },
      // 点击actionSheet回调
      async actionSheetCallback(index) {
        this.questionBankType = this.listError[index].value;
        this.examList = await this.getExamList();
        if (this.xxx.progressRecordId && this.questionBankType !== 5) {
          this.progressRecordId = this.xxx.progressRecordId
          this.getProsess()
          this.handlePractice = true
        } else {
          const newSvExam = uni.getStorageSync('sv-exam') || {}
          if (!newSvExam.questionItems) {
            newSvExam.questionItems = {}
          }
          newSvExam.questionItems.practiceIndex = 0
          uni.setStorageSync('sv-exam', newSvExam)
          uni.navigateTo({
            url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
            success: (res) => {
              res.eventChannel.emit('e-transmit-exams', {
                param: {
                  from_lib: this.curLib,
                  unit: 'unit-1'
                },
                opt: {
                  lib_name: this.curLib,
                  type: 'practice',
                  questionCompletedCount: this.questionCompletedCount,
                  questionBankType: this.questionBankType,
                  categoryId: this.categoryId
                },
                apifunc: {
                  examList: this.xxx
                }
              })
            }
          })
        }

      },
      backIndex() {
        uni.navigateback();
      },
      getExamList() {
        return new Promise((resolve, reject) => {
          if (this.paperType === 'public') {
            const param = {
              categoryId: this.categoryId,
              questionBankType: this.questionBankType
            }
            getExamAPI(param).then((res) => {
              resolve(res.data)
              this.xxx = res.data

            })
          } else if (this.paperType === 'person') {
            const param = {
              id: this.personId,
              questionBankType: this.questionBankType
            }
            console.log(param, 'param');
            getExamAPI(param).then((res) => {
              resolve(res.data)
              this.xxx = res.data

            })
          }

        })
      },
      //获取进度
      async getProsess() {
        const p = {
          id: this.progressRecordId
        }
        await startRecitePaperAPI(p).then((r) => {
          this.questionCompletedCount = r.data.questionCompletedCount
          this.questionCount = r.data.questionCount
        })
      },
      // 题型答题
      async questionTypeAnswering(type) {
        this.showError = true
      },
      // 随机答题
      async randomAnswering(type) {
        this.questionBankType = 5
        this.questionCompletedCount = 0
        const newSvExam = uni.getStorageSync('sv-exam') || {}
        if (!newSvExam.questionItems) {
          newSvExam.questionItems = {}
        }
        newSvExam.questionItems.practiceIndex = this.questionCompletedCount
        uni.setStorageSync('sv-exam', newSvExam)
        this.examList = await this.getExamList();
        uni.navigateTo({
          url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
          success: (res) => {
            res.eventChannel.emit('e-transmit-exams', {
              param: {
                from_lib: this.curLib,
                unit: 'unit-1'
              },
              opt: {
                lib_name: this.curLib,
                type: type,
                questionCompletedCount: this.questionCompletedCount,
                questionBankType: this.questionBankType,
                categoryId: this.categoryId
              },
              apifunc: {
                examList: this.xxx
              }
            })
          }
        })
      },
      // 顺序答题
      async sequentialAnswering(type) {
        this.questionBankType = 4
        this.examList = await this.getExamList();
        if (this.xxx.progressRecordId && this.questionBankType !== 5) {
          this.progressRecordId = this.xxx.progressRecordId
          this.getProsess()
          this.handlePractice = true
        }else{
          const param = this.progressRecordId
          const newSvExam = uni.getStorageSync('sv-exam') || {}
          if (!newSvExam.questionItems) {
            newSvExam.questionItems = {}
          }
          newSvExam.questionItems.practiceIndex = 0
          uni.setStorageSync('sv-exam', newSvExam)
          
          uni.navigateTo({
            url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
            success: (res) => {
              res.eventChannel.emit('e-transmit-exams', {
                param: {
                  from_lib: this.curLib,
                  unit: 'unit-1'
                },
                opt: {
                  lib_name: this.curLib,
                  type: type,
                  questionCompletedCount: this.questionCompletedCount,
                  questionBankType: this.questionBankType,
                  categoryId: this.categoryId
                },
                apifunc: {
                  examList: this.xxx
                }
              })
            }
          })
        }
      },
      //易错答
      async yicuoAnswering(type) {
        this.yicui = true
        this.questionBankType = 1
        this.examList = await this.getExamList();
        if (this.xxx.progressRecordId && this.questionBankType !== 5) {
          this.progressRecordId = this.xxx.progressRecordId
          this.getProsess()
          this.handlePractice = true
        }else{
          const param = this.progressRecordId
          const newSvExam = uni.getStorageSync('sv-exam') || {}
          if (!newSvExam.questionItems) {
            newSvExam.questionItems = {}
          }
          newSvExam.questionItems.practiceIndex = 0
          uni.setStorageSync('sv-exam', newSvExam)
          
          uni.navigateTo({
            url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
            success: (res) => {
              res.eventChannel.emit('e-transmit-exams', {
                param: {
                  from_lib: this.curLib,
                  unit: 'unit-1'
                },
                opt: {
                  lib_name: this.curLib,
                  type: type,
                  questionCompletedCount: this.questionCompletedCount,
                  questionBankType: this.questionBankType,
                  categoryId: this.categoryId,
                  changkaoda:'changkaoda'
                },
                apifunc: {
                  examList: this.xxx
                }
              })
            }
          })
        }
      },
      //常考答
      async changkaoAnswering(type) {
        this.questionBankType = 1
         this.yicui = false
        this.examList = await this.getExamList();
        if (this.xxx.progressRecordId && this.questionBankType !== 5) {
          this.progressRecordId = this.xxx.progressRecordId
          this.getProsess()
          this.handlePractice = true
        }else{
          const param = this.progressRecordId
          const newSvExam = uni.getStorageSync('sv-exam') || {}
          if (!newSvExam.questionItems) {
            newSvExam.questionItems = {}
          }
          newSvExam.questionItems.practiceIndex = 0
          uni.setStorageSync('sv-exam', newSvExam)
          
          uni.navigateTo({
            url: '../../uni_modules/sv-exam-plus/pages/exam/exam',
            success: (res) => {
              res.eventChannel.emit('e-transmit-exams', {
                param: {
                  from_lib: this.curLib,
                  unit: 'unit-1'
                },
                opt: {
                  lib_name: this.curLib,
                  type: type,
                  questionCompletedCount: this.questionCompletedCount,
                  questionBankType: this.questionBankType,
                  categoryId: this.categoryId,
                },
                apifunc: {
                  examList: this.xxx
                }
              })
            }
          })
        }
      },

    }
  }
</script>

<style lang="scss">
  .container {
    background-color: #F2F3F7;

    .container_header {
      background-color: #fff;
      padding: 20rpx;

      .u-today-card {
        font-weight: 700;
      }

      .container_header_public {
        text-align: center;
      }

      .u-today {
        display: flex;
        justify-content: space-between;
        // padding: 0 25rpx;
        color: #333;
      }

      .u-today-header {
        display: flex;
        justify-content: space-between;
        color: darkgray;
        margin-top: 10rpx;

        .u-today-text {
          // padding: 10rpx 25rpx;
          font-size: 25rpx;
        }
      }

      .u-card {
        text-align: center;
      }
    }

    .container_grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin: 20rpx;

      .container_grid_item {
        margin-top: 30rpx;

        .image-top {
          margin: auto;
        }

      }

      .grid-text {
        font-size: 28rpx;
        margin-top: 4rpx;
        color: $u-type-info;
      }
    }

    .container_aiItem {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 20rpx;
      background-image: url('../../static/images/grouptwo.png');
      background-size: 100% 450rpx;
      background-color: #fff;
      background-repeat: no-repeat;
      height: 480rpx;

      .container_item_circle {
        position: relative;
        width: 300rpx;
        height: 300rpx;
        background-image: url('../../static/images/circletwo.png');
        background-size: 300rpx 300rpx;
        background-repeat: no-repeat;


        .square {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
        }

      }
    }

    .container_item {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 20rpx;
      background-image: url('../../static/images/groupone.png');
      background-size: 100% 450rpx;
      background-color: #fff;
      background-repeat: no-repeat;
      height: 480rpx;

      .container_item_circle {
        position: relative;
        width: 300rpx;
        height: 300rpx;
        background-image: url('../../static/images/circleone.png');
        background-size: 300rpx 300rpx;
        background-repeat: no-repeat;


        .square {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #fff;
        }
      }
    }

    .container_item_btn {
      .container_item_btn_item1 {
        display: flex;
        align-items: center;
        margin-left: -40rpx;
        margin-bottom: 20rpx;

        .container_item_btn_text {
          margin-left: 20rpx;

          .container_item_btn_text_title {
            font-size: 14rpx;
            color: darkgray;

          }
        }

      }

      .container_item_btn_item2 {
        display: flex;
        align-items: center;
        margin-left: 0rpx;
        margin-bottom: 20rpx;

        .container_item_btn_text {
          margin-left: 20rpx;

          .container_item_btn_text_title {
            font-size: 14rpx;
            color: darkgray;

          }
        }

      }

      .container_item_btn_item3 {
        display: flex;
        align-items: center;
        margin-left: 40rpx;
        margin-bottom: 20rpx;

        .container_item_btn_text {
          margin-left: 20rpx;

          .container_item_btn_text_title {
            font-size: 14rpx;
            color: darkgray;

          }
        }

      }

      .u-btn {
        margin-left: 10rpx;
      }
    }


  }

  .container_popup_text {
    text-align: center;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }
</style>